<template>
    <div class="addTech">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户名称" prop="name" label-width="120px">
    			<el-input v-model="ruleForm.name" style="width: 230px;" />
    			<span style="margin-left: 30px;">教师建企业微信名称</span>
 			</el-form-item>
			<el-form-item label="绑定企微账号" prop="account" label-width="120px">
				<el-input v-model="ruleForm.account" style="width: 230px;" :disabled="singleDisable"></el-input>
				<span style="margin-left: 30px;">企微账号可通过企业微信管理后台查看<span style="color: #1890ff;margin-left: 5px;cursor: pointer;" @click="showImg = true">案例</span></span>
			</el-form-item>
			<el-form-item label="登录账号" prop="phone" label-width="120px">
				<el-input v-model="ruleForm.phone" style="width: 230px;" :disabled="singleDisable"></el-input>
				<span style="margin-left: 30px;">教师企业微信绑定手机号</span>
			</el-form-item>
			<el-form-item label="姓名" prop="real_name" label-width="120px">
				<el-input v-model="ruleForm.real_name" style="width: 230px;" />
			</el-form-item>
			<div class="default" v-if="!ruleForm.id">
				<div class="head"> 默认信息</div>
				<div class="head"> <div class="title">登录密码</div> <span> 123456</span></div>
				<div class="head">  <div class="title">角色</div> <span> 教师</span></div>
				<div class="head"> <div class="title">数据权限</div> <el-radio label="0" v-model="radio" disabled>管理者</el-radio>
				<el-radio label="1" v-model="radio" disabled> 普通员工</el-radio> </div>
				<div class="head">默认信息修改需要在《用户管理》模块进行操作</div>
			</div>
			<div style="text-align: center;">
				<el-button @click="resetForm('ruleForm')">取消</el-button>
				<el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
			</div>
        </el-form>
        <el-dialog width="1300px" title="案例" :visible.sync="showImg" append-to-body>
            <img src="../../../assets/images/demo.png" alt="">
		</el-dialog>
    </div>
</template>

<script>
import { add, updateT} from '@/api/techearsNew.js'
export default {
    props:{
        editOne:{}
    },
    data() {
        return {
          	showImg:false,
          	radio:'1',
          	singleDisable:false,
			ruleForm: {
          		name: '',
          		nickname:'',
          		account:'',
          		phone:'',
				real_name:''
        	},
        	rules: {
          		name: [
					{ required: true, message: '请输入用户名称', trigger: 'blur' },
					{ min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
				],
				account: [
					{ required: true, message: '请输入绑定企微账号', trigger: 'blur' },
					{ min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }
				],
				real_name: [
					{ required: true, message: '请输入名称', trigger: 'blur' },
					{ min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
				],
				phone:[
					{ required: true, message: '请输入手机号码', trigger: 'blur' },
					{
						required: true,
						pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
						message: '请输入正确的手机号码',
						trigger: 'blur',
					},
				]
			}
        }
    },
	created(){
      this.singleDisable=false
        if(this.editOne.id){
                this.ruleForm.id=this.editOne.id
                this.ruleForm.name=this.editOne.name
                this.ruleForm.phone=this.editOne.phone
                this.ruleForm.account=this.editOne.wechat_user_id
				this.ruleForm.real_name=this.editOne.real_name
                this.singleDisable=true
            }
    },
	watch:{
        editOne(newV){
          this.singleDisable=false
            if(newV.id){
                this.ruleForm.id=newV.id
                this.ruleForm.name=newV.name
                this.ruleForm.phone=newV.phone
                this.ruleForm.account=newV.wechat_user_id
				this.ruleForm.real_name=newV.real_name
                this.singleDisable=true
            }
        }
    },
    methods: {
        submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          	if (valid) {
				this.ruleForm.nickname=this.ruleForm.name
				if(this.ruleForm.id){
					updateT(this.ruleForm).then(res=>{
						this.$message({
							message: '修改成功',
							type: 'success'
						});
						this.$emit('refresh')
					})
				}else{
					add(this.ruleForm).then(res=>{
						this.$message({
							message: '添加成功',
							type: 'success'
						});
						this.$emit('refresh')
					}).catch(res=>{
						return
					})
				}
          	} else {
            	console.log('error submit!!');
            	return false;
          	}
        });
      },
      resetForm(formName) {
        this.$emit('refresh')
      }
    },
    
 
}
</script>
<style lang="scss" scoped>
.addTech{
    width: 100%;
    .default{
      color: #606266;
      font-weight: 600;
      padding-left: 50px;
      .head{
        margin-top: 20px;
        margin-bottom: 30px;
        width: 300px;
        &:last-child{
          font-weight: normal;
          font-size: 14px;
		  margin-left: 80px;
        }
        .title{
          width: 56px;
		  text-align: right;
          display: inline-block;
		  margin-right: 20px;
        }
        span{
          width: 100px;
          display: inline-block;
        }
      }
    }
}
    
</style>
